<template>
  <div class="map-main">
    <div class="map-left">
      <baidu-map
        ref="BDmap"
        class="bm-view"
        :center="center"
        :double-click-zoom="double"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
      >
        <bm-boundary
          v-for="item in district"
          :key="item.id + item.district_name"
          :name="item.district_name"
          :strokeWeight="2"
          strokeColor="#2977f0"
          fillColor="#2e5ecc"
          :fillOpacity="0.3"
          @click="changeDistrict(item.district_name)"
        >
        </bm-boundary>
        <bm-label />
        <template>
          <bm-label
            v-for="item in district"
            :key="item.district_name"
            :content="item.district_name"
            :title="item.district_name"
            :position="{ lng: item.lng, lat: item.lat }"
            :labelStyle="{ color: '#ff3a56', fontSize: '12px' }"
            @click="changeDistrict(item.district_name)"
          />
        </template>
        <bm-marker
          v-for="(item, index) in map_list"
          :key="index"
          :position="{ lat: item.lat, lng: item.lng }"
          :icon="{ url: iconPng, size: { width: 36, height: 41 } }"
          @click="go(item, 'map')"
          @mouseout="item.show = false"
          @mouseover="item.show = true"
        >
          <bm-label
            v-if="item.show"
            :content="
              item.land_name ||
                item.factory_name ||
                item.build_name ||
                item.district_name
            "
            :labelStyle="{
              color: '#ff3a56',
              fontSize: '14px',
              border: 'none',
              background: 'rgba(255,255,255,.9)',
              padding: '4px',
            }"
            :massClear="true"
            :offset="{ width: 24, height: 6 }"
          />
        </bm-marker>
      </baidu-map>
    </div>
    <div class="map-right">
      <div class="search">
        <img class="search-icon" src="~@img/resources/icon-search.png" alt="" />
        <el-input
          v-model="key_words"
          type="text"
          placeholder="请输入关键字"
          @keydown.enter.native="search"
          clearable
        ></el-input>
        <div class="high" @click="isHigh = !isHigh">
          高级筛选
          <img
            src="~@img/resources/icon-up.png"
            alt=""
            :class="[isHigh == true ? 'rotate init' : 'init']"
          />
        </div>
        <span @click="search">搜索</span>
      </div>

      <ul :class="[isHigh == true ? 'height options' : 'options']">
        <!-- <li>
          <span>载体名称：</span>
          <el-input
            v-model="carrier_name"
            placeholder="请输入"
            type="text"
            @keydown.enter.native="search"
            clearable
          ></el-input>
        </li> -->
        <li>
          <span>拟招引业态：</span>
          <el-input
            v-model="industry_name"
            placeholder="请输入"
            type="text"
            @keydown.enter.native="search"
            clearable
          ></el-input>
          <!-- <el-cascader
            v-model="industry_name"
            :options="options_type"
            :props="{
              value: 'label',
              label: 'label',
            }"
            :show-all-levels="false"
            clearable
          ></el-cascader> -->
        </li>
        <li>
          <span>载体类型：</span>
          <el-select v-model="carrier_type_id" clearable placeholder="请选择">
            <el-option
              v-for="item in options_nature"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>

        <li>
          <span>所属县区：</span>
          <el-select v-model="district_name" clearable placeholder="请选择">
            <el-option
              v-for="item in options_district"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <el-button type="default" @click="clear">清空</el-button>
        </li>
        <!-- <li>
          <span>载体地址：</span>
          <el-input
            v-model="carrier_address"
            placeholder="请输入"
            type="text"
            @keydown.enter.native="search"
            clearable
          ></el-input>
        </li> -->

        <!-- <li>
          <span>占地面积：</span>
          <el-select v-model="cover_land_area_id" clearable placeholder="请选择">
            <el-option
              v-for="item in options_area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li> -->

        <!-- <li>
          <el-button type="primary" @click="search">查询</el-button>
        </li> -->
      </ul>

      <div>
        <div class="tips">
          产业载体
        </div>

        <ul class="list">
          <li
            v-for="item of list"
            :key="item.id"
            :class="item.carrier_type == '行政区' ? 'district' : ''"
          >
            <template v-if="item.carrier_type == '行政区'">
              <div class="title" @click="go(item, 'list1')">
                <img src="~@img/public/icon-xingzheng.png" alt="" />
                <span v-html="item.district_name"></span>
              </div>
              <div class="flex-li">
                <p>GDP：<span v-html="item.gdp"></span>（亿元）</p>
                <p>
                  区域面积：<span v-html="item.cover_region_area"></span>（km²）
                </p>
              </div>
              <p class="industry_fen">
                产业定位：
                <el-popover trigger="hover" placement="top">
                  <div style="max-width:400px;" v-if="item.industry_name != ''">
                    <!-- -->
                    <el-tag
                      v-for="(item, index) of item.industry_name.split('、')"
                      :key="index"
                      style="margin:0 10px 10px 0;"
                    >
                      {{ item }}
                    </el-tag>
                  </div>
                  <div
                    slot="reference"
                    class="name-wrapper"
                    v-html="item.industry_name"
                  ></div>
                </el-popover>
              </p>
              <span class="detail go" @click="goDetails(item.id, 0)">详情</span>
            </template>
            <template v-if="item.carrier_type == '土地'">
              <div class="title" @click="go(item, 'list1')">
                <span v-html="item.land_name"></span>
              </div>
              <div class="flex-li">
                <p>所属县区：<span v-html="item.district_name"></span></p>
                <p>用地性质：<span v-html="item.land_nature"></span></p>
              </div>
              <p class="industry_fen">
                总用地面积（公顷）：
                <span v-html="item.total_area"></span>
              </p>
              <span class="detail  go" @click="goDetails(item.id, 1)"
                >详情</span
              >
            </template>
            <template v-if="item.carrier_type == '标准厂房'">
              <div class="title" @click="go(item, 'list1')">
                <span v-html="item.factory_name"></span>
              </div>
              <div class="flex-li">
                <p>所属县区：<span v-html="item.district_name"></span></p>
                <p>标准化厂房：<span v-html="item.is_standard"></span></p>
              </div>
              <p class="industry_fen">
                拟招引业态：
                <span v-html="item.attract_status"></span>
              </p>
              <span class="detail  go" @click="goDetails(item.id, 2)"
                >详情</span
              >
            </template>
            <template v-if="item.carrier_type == '商业楼宇'">
              <div class="title" @click="go(item, 'list1')">
                <span v-html="item.build_name"></span>
              </div>
              <div class="flex-li">
                <p>所属县区：<span v-html="item.district_name"></span></p>
                <p>楼宇类型：<span v-html="item.build_type"></span></p>
              </div>
              <p class="industry_fen">
                拟招引业态：
                <span v-html="item.attract_status"></span>
              </p>
              <span class="detail  go" @click="goDetails(item.id, 3)"
                >详情</span
              >
            </template>
          </li>
        </ul>
        <div class="pagination" v-if="list.length != 0">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="per_page"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
        <div class="empty" v-if="list.length == 0">
          <img src="~@img/public/img-empty.png" alt="" />
          <p>暂无符合筛选条件的载体资源</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import iconPng from "@img/public/icon-location.png";
import { SearchAll } from "@api/resources";
export default {
  data() {
    return {
      iconPng,
      double: "",
      center: { lng: 112.48699, lat: 37.94036 }, //经纬度
      zoom: 9, //地图展示级别
      value: "",
      isHigh: true,
      options_type: [],
      options_nature: [
        // {
        //   value: 1,
        //   label: "园区",
        // },
        {
          value: "1",
          label: "土地",
        },
        {
          value: "2",
          label: "标准厂房",
        },
        {
          value: "3",
          label: "商业楼宇",
        },
      ],
      options_area: [
        {
          value: "0-500m²",
          label: "0-500m²",
        },
        {
          value: "500-1000m²",
          label: "500-1000m²",
        },
        {
          value: "1000-2000m²",
          label: "1000-2000m²",
        },
        {
          value: "2000-5000m²",
          label: "2000-5000m²",
        },
        {
          value: "5000-10000m²",
          label: "5000-10000m²",
        },
      ],
      options_district: [
        // { label: "太原市", value: "太原市" },
        { label: "小店区", value: "小店区" },
        { label: "迎泽区", value: "迎泽区" },
        { label: "杏花岭区", value: "杏花岭区" },
        { label: "万柏林区", value: "万柏林区" },
        { label: "尖草坪区", value: "尖草坪区" },
        { label: "晋源区", value: "晋源区" },
        { label: "古交市", value: "古交市" },
        { label: "清徐县", value: "清徐县" },
        { label: "阳曲县", value: "阳曲县" },
        { label: "娄烦县", value: "娄烦县" },
        // { label: "综改示范区", value: "综改示范区" },
        { label: "中北高新区", value: "中北高新区" },
        { label: "西山示范区", value: "西山示范区" },
        { label: "清徐开发区", value: "清徐开发区" },
        { label: "阳曲示范区", value: "阳曲示范区" },
      ],
      list: [],
      map_list: [],
      district: [],
      total: 0,
      district_name: "",
      carrier_name: "",
      carrier_type_id: "",
      industry_name: "",
      cover_land_area_id: "",
      carrier_address: "",
      key_words: "",
      page: 1,
      per_page: 6,

      searchOptions: {
        district_name: "",
        carrier_name: "",
        carrier_type_id: 0,
        industry_name: "",
        cover_land_area_id: "",
        carrier_address: "",
        key_words: "",
      },
    };
  },
  mounted() {
    this.SearchAll();
  },
  methods: {
    clear() {
      this.district_name = "";
      this.carrier_name = "";
      this.carrier_type_id = "";
      this.industry_name = "";
      this.cover_land_area_id = "";
      this.carrier_address = "";
      this.key_words = "";
      this.page = 1;
      this.searchOptions = {
        district_name: "",
        carrier_name: "",
        carrier_type_id: 0,
        industry_name: "",
        cover_land_area_id: "",
        carrier_address: "",
        key_words: "",
      };
      this.zoom = 9;
      this.SearchAll();
    },
    search() {
      this.searchOptions = {
        district_name: this.district_name,
        carrier_name: this.carrier_name,
        carrier_type_id:
          this.carrier_type_id == "" ? 0 : parseInt(this.carrier_type_id),
        industry_name: this.industry_name,
        cover_land_area_id: this.cover_land_area_id,
        carrier_address: this.carrier_address,
        key_words: this.key_words,
      };
      this.page = 1;
      this.zoom = 9;

      this.SearchAll();
    },

    changeDistrict(district_name) {
      this.district_name = district_name;
      this.searchOptions.district_name = district_name;
      this.page = 1;
      this.SearchAll();
    },

    async SearchAll() {
      this.list = [];
      this.total = 0;
      this.map_list = [];
      this.district = [];
      // this.$refs.BDmap.clearOverlays();
      if (
        this.searchOptions.carrier_type_id == "" ||
        this.searchOptions.carrier_type_id == 0
      ) {
        let res = await SearchAll({
          ...this.searchOptions,
          page: 1,
          per_page: 5000000,
        });
        let allData = [];
        let district = [];
        let map_list = [];
        let str = "";
        res.map((item, index) => {
          if (item.code == 0) {
            item.data.data_list.map((ele, i) => {
              let obj = { ...ele };
              if (ele.carrier_type == "行政区") {
                district.push(obj);
              }
              if (ele.carrier_type != "行政区") {
                map_list.push(obj);
              }
              allData.push(obj);
            });
          } else if (item.code == 4002) {
          } else if (item.code == 4004) {
          } else {
            str += item.msg;
          }
        });
        if (str) {
          this.$message.error(str);
        }
        map_list.forEach((item) => {
          item.show = false;
        });
        allData.forEach((item) => {
          item.show = false;
        });
        this.list = [...allData].splice(
          this.per_page * (this.page - 1),
          this.per_page
        );
        this.total = [...allData].length;
        this.map_list = [...map_list];
        [...district].map((item) => {
          item.district_name = item.district_name
            .replace("<em>", "")
            .replace("</em>", "");
        });
        this.district = [...district];
      } else if (
        this.searchOptions.carrier_type_id != "" &&
        this.searchOptions.carrier_type_id != 0
      ) {
        let res = await SearchAll({
          ...this.searchOptions,
          page: 1,
          per_page: 5000000,
        });
        if (res.code && res.code == 4002) {
          this.list = [];
          this.map_list = [];
          this.district = [];
          this.total = 0;
        } else if (res.code && res.code != 0) {
          this.$message.error(res.msg);
          this.list = [];
          this.district = [];
          this.map_list = [];
          this.total = 0;
        } else {
          res.data_list.map((item) => {
            item.show = false;
          });
          this.map_list = [...res.data_list];
          this.total = res.size;
          this.district = [];
          this.list = [...res.data_list].splice(
            this.per_page * (this.page - 1),
            this.per_page
          );
        }
      }
    },
    handleClick(val) {
      console.log(val.name);
    },
    goDetails(id, type) {
      if (type == 0) {
        this.$router.push({ name: "district", params: { id } });
      } else if (type == 1) {
        this.$router.push({ name: "land", params: { id } });
      } else if (type == 2) {
        this.$router.push({ name: "workshop", params: { id } });
      } else if (type == 3) {
        this.$router.push({ name: "building", params: { id } });
      }
    },
    go(item, type) {
      if (item.lat != "" && item.lng != "") {
        this.center = { lat: item.lat, lng: item.lng };
        this.zoom = 20;
      } else {
        this.center = { lat: 35.853091, lng: 112.977747 };
        this.zoom = 7;
      }
      if (type == "map") {
        let index = this.list.findIndex((i) => {
          return item.id == i.id;
        });
        this.list.splice(index, 1);
        this.list.unshift(item);
      }
    },

    handleCurrentChange(val) {
      this.zoom = 9;

      this.page = val;
      this.SearchAll();
    },
  },
};
</script>

<style lang="less" scoped>
.tips {
  margin: 20px 0;
  text-align: left;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    box-sizing: border-box;
    position: relative;
    flex: 0 0 48%;
    padding: 15px 20px;
    height: 118px;
    text-align: left;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 10px;
    margin-bottom: 20px;
    &.district {
      // border-left: 4px solid #446db3;
      position: relative;
    }
    &.district::after {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      width: 4px;
      height: calc(100% - 8px);
      background: #446db3;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    .title {
      position: relative;
      max-width: 350px;
      padding-right: 65px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 18px;
      padding-bottom: 6px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 1px;
        background: #446db3;
      }
      span,
      img {
        vertical-align: middle;
      }
      span {
        margin-left: 10px;
      }
    }
    p {
      margin-top: 10px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      // &:last-of-type {
      //   margin-top: 6px;
      // }
    }
    .flex-li {
      display: flex;
      p {
        flex: 1;
      }
    }
    span.go {
      position: absolute;
      right: 20px;
      top: 14px;
      width: 60px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
      background: #5889dc;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      border-radius: 4px;
    }
  }
}
.init {
  transition: 0.8s;
  transform: rotate(180deg);
}
.rotate {
  transform: rotate(0);
}

.bm-view {
  width: 100%;
  height: 100%;
  /deep/.BMapLabel {
    background-color: transparent !important;
    border: 0 !important;
    color: rgb(121, 22, 22) !important;
  }
}
.estimate_body {
  width: 100%;
}
.estimate_main {
  width: 100%;
  height: 100%;
}
.map-main {
  height: calc(100% - 60px);
  padding: 30px 20px;
  display: flex;
  .map-left {
    flex: 0 0 705px;
    background: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
    border-radius: 10px;
  }
  .map-right {
    flex: 0 0 815px;
    margin-left: 30px;
  }
}
.search {
  position: relative;
}
/deep/ .search .el-input {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
}

/deep/ .search .el-input__inner {
  height: 60px;
  line-height: 60px;
  padding-left: 80px;
  padding-right: 270px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;

  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
}
.search span {
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  height: 60px;
  line-height: 60px;
  background: #446db3;
  border-radius: 0px 10px 10px 0px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 2px;
  cursor: default;
}
.search .search-icon {
  position: absolute;
  left: 30px;
  top: 15px;
  z-index: 999;
  cursor: default;
}
.search .high {
  position: absolute;
  right: 150px;
  top: 0px;
  width: 115px;
  height: 60px;
  line-height: 60px;
  text-align: left;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 0.6);
  cursor: default;
  img {
    position: absolute;
    top: 28px;
    margin-left: 10px;
  }
}
// 输入框 选择框 样式修改
/deep/ .search .el-input__inner:focus,
/deep/.search .el-input__inner:hover {
  border-color: transparent;
  outline: 0;
}
// 输入框 选择框 样式修改
.options {
  height: 0;
  transition: 0.3s;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 28px 0 0;
  li {
    flex: 0 0 29%;
    margin-bottom: 8px;
    &:nth-of-type(4n) {
      flex: 0 0 10%;
    }
    span {
      display: inline-block;
      width: 85px;
      text-align: right;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 0.8);
      line-height: 34px;
    }
  }
}
.height {
  height: 42px;
}
/deep/ .el-button--default {
  width: 100px;
  height: 28px;
  line-height: 0px;
  border-radius: 4px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.38);
  border-color: transparent;
}
/deep/ .el-button--primary {
  width: 100px;
  height: 28px;
  line-height: 0px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  border-radius: 4px;
  background-color: #446db3;
  border-color: transparent;
}
/deep/.options .el-input {
  display: inline-block;
  width: 140px;
  height: 28px;
}
/deep/.options .el-input__inner {
  display: inline-block;
  width: 140px;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #cccccc;
  border-radius: 5px;
}
/deep/.options .el-input__inner:focus,
/deep/.options .el-input__inner:hover {
  border-color: #ccc;
  outline: 0;
}
// 修改选择框
/deep/ .options .el-input__icon {
  line-height: 28px;
}
//
/deep/ .options .el-icon-arrow-up:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .options .el-icon-arrow-down:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .options .el-select .el-input .el-select__caret {
  transform: rotateZ(0);
}
/deep/ .options .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(180deg);
}
// 选项卡样式修改
/deep/.el-tabs__item {
  padding: 0 35px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  height: 60px;
  line-height: 60px;
}
/deep/.el-tabs__item.is-active {
  font-weight: bold;
  color: #446db3;
}

/deep/.el-tabs__active-bar {
  height: 4px;
  background: #446db3;
}
/deep/ .el-tabs__nav-wrap {
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
}
/deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs {
  width: 100%;
  .el-tabs__content {
    box-sizing: border-box;
    overflow: unset;
  }
}
/deep/.el-tabs__nav-scroll {
  padding-left: 30px;
}

// 表格分页样式修改
.el-pagination {
  text-align: right;
}
/deep/ .el-pager li {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
  margin: 0 8px;
}

/deep/ .el-pager li.active {
  color: #fff;
  background: #446db3;
  box-shadow: 0px 0px 3px 0px rgba(0, 50, 89, 0.4);
  border-radius: 6px;
}

/deep/ .el-pagination .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-next:hover
  .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/.el-pagination .btn-next:hover .el-icon-arrow-right:before {
  background: url("~@img/atlas/sidenav-hover2.png") no-repeat center;
}
/deep/ .el-pagination .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-prev:hover
  .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/.el-pagination .btn-prev:hover .el-icon-arrow-left:before {
  background: url("~@img/atlas/sidenav-hover1.png") no-repeat center;
}
/deep/.pagination .el-select .el-input.is-focus .el-input__inner {
  height: 30px;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/.pagination .el-input__inner {
  height: 30px;
  color: #666;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}

/deep/ .el-pagination .btn-next,
/deep/ .el-pagination .btn-prev {
  background-color: transparent;
}
/deep/ .el-pagination .btn-next i,
/deep/ .el-pagination .btn-prev i {
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}

/deep/.search .el-input__suffix {
  right: 280px;
}
/deep/ .options .el-input,
/deep/ .options .el-input__inner {
  width: 140px !important;
}
.empty {
  text-align: center;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  img {
    margin-top: 70px;
    margin-bottom: 30px;
  }
}
.list li .industry_fen {
  margin-top: 6px;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
}
/deep/ .el-popover[x-placement^="top"] {
  width: 600px;
}
/deep/ .name-wrapper {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .map-main .map-left {
    flex: 0 0 450px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .map-main .map-right {
    flex: 0 0 670px;
  }

  /deep/ .options .el-input,
  /deep/ .options .el-input__inner {
    width: 94px !important;
  }
  .options li {
    flex: 0 0 26%;
  }
  .list {
    margin-bottom: 10px;
    padding-right: 10px;
    max-height: 400px;

    overflow-y: auto;
  }
  .list li {
    flex: 0 0 48%;
  }
  .list li .title {
    position: relative;
    max-width: 280px;
  }
  .list li .industry_fen {
    max-width: 100%;
  }
  .name-wrapper {
    max-width: 180px;
  }
  .list li p {
    font-size: 12px;
  }
  .options {
    margin: 16px 0 0;
  }
  .tips {
    margin: 10px 0;
  }
  .list li {
    padding: 4px 20px;
    height: 100px;
  }
  .options li span {
    width: 75px;
    font-size: 12px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .map-main .map-right {
    flex: 0 0 574px;
  }
  .options li span {
    font-size: 12px;
  }
  /deep/ .options .el-input,
  /deep/ .options .el-input__inner {
    width: 74px !important;
  }
  .name-wrapper {
    max-width: 430px;
  }
  .options li span {
    display: inline-block;
    width: 74px;
  }
  .list {
    height: 400px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .map-main .map-left {
    flex: 0 0 400px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .map-main {
    flex-direction: column;
    overflow-y: scroll;
  }
  .map-main .map-right {
    margin-top: 20px;
    margin-left: 0;
  }
  .list {
    height: 840px;
  }
  /deep/ .options .el-input,
  /deep/ .options .el-input__inner {
    width: 120px !important;
  }
}
/*分辨率低于1024，采用下面的样式*/
</style>
<style>
.list span em {
  color: #f73131 !important;
}
.el-tag em {
  color: #f73131 !important;
}
</style>
